<script lang="ts" setup>
import API from '@/services';
import { Message } from '@arco-design/web-vue';
import { onMounted, ref } from 'vue';
import ModelGraph from '../../../info/components/ModelGraph/ModelGraph';
// todo: 引入 svgo 啊
import editBgImg from '@/assets/images/edit_bg_img.svg';

const props = defineProps<{ id: number | string }>();
const emit = defineEmits(['editEvent']);
const loading = ref(false);
const getModelTreeData = async () => {
  loading.value = true;
  try {
    const { code, data } = await API.dataTable.getDataTableGetForeignKeyTreeById({
      id: props.id as number
    });
    treedata.value = data || {};
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};
const treedata = ref<defs.DataModelRelationVo>({});
onMounted(() => {
  getModelTreeData();
});
const onRemoveEntity = async (data: defs.DataModelRelationVo) => {
  loading.value = true;
  try {
    const res = await API.dataModel.deleteDelModelRelationById({
      id: data.id as number
    });
    if (res.code === 200) {
      Message.success('删除成功');
      await getModelTreeData();
    }
  } catch {
    loading.value = false;
  }
  // todo: 更新 详情数据
};
const onEditEvent = () => {
  emit('editEvent');
};

const reload = () => {
  // todo: 需要知道 ModelGraph 是否已经准备好
  // if(){
  getModelTreeData();
  // }
};
defineExpose({
  reload
});
</script>
<template>
  <div style="width: 100%; height: 100%">
    <a-spin style="display: flex; height: 100%" :loading="loading">
      <div
        style="position: absolute; z-index: 1; cursor: pointer; right: 0"
        @click="onEditEvent"
      >
        <img :src="editBgImg" />
      </div>
      <ModelGraph
        style="flex: 1"
        :treedata="treedata"
        @remove-event="onRemoveEntity"
      />
    </a-spin>
  </div>
</template>
